<!--  头部-->
<template>
  <div class="hMenu">
    <div class="picture">
      <!-- <el-avatar icon="el-icon-user-solid" v-if="!user_pict"></el-avatar>
      <el-avatar v-else :src="user_pict"></el-avatar> -->
      <div
        style="width: 40px; height: 40px; border-radius: 20px; overflow: hidden"
      >
        <img :src="user_pict" alt="" style="width: 100%; height: 100%" />
      </div>
    </div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        :router="true"
        active-text-color="#ffd04b"
      >
        <el-submenu
          v-for="(item, index) in allRouters"
          :key="index"
          :index="item.name"
        >
          <template slot="title">{{ item.meta.title }}</template>
          <el-menu-item
            v-for="(it, i) in item.children"
            :key="i"
            :index="it.path"
            >{{ it.meta.title }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
    <div class="other">
      <div class="settings" v-for="(item, index) in settingOpt" :key="index">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i :class="item.icon"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(it, i) in item.childList"
              :key="i"
              :command="it.id"
            >
              {{ it.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getHeadPicture } from "@/api/users";
export default {
  data() {
    return {
      user_pict: "",
      activeIndex: "0",
      allRouters: [],
      settingOpt: [
        {
          icon: "el-icon-s-tools",
          childList: [
            { name: "头像设置", id: "headPictSet" },
            { name: "密码设置", id: "passwordSet" },
            { name: "背景设置", id: "backgroundSet" },
          ],
        },
        {
          icon: "el-icon-s-custom",
          childList: [{ name: "退出登录", id: "loginout" }],
        },
      ],
    };
  },
  watch: {
    "$store.state.user.headPict": {
      handler(newVal, oldVal) {
        this.user_pict = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  components: {},

  computed: {},

  mounted() {
    this.getPicture();
    this.allRouters = this.$store.state.permission.addRouters;
    console.log(this.allRouters);
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand(common) {
      if (common == "loginout") {
        this.LoginOut();
      } else if (common.indexOf("Set") != -1) {
        //展开
        this.$emit("openSet", true);
      }
    },
    async getPicture() {
      let res = await getHeadPicture();
      if (res.success) {
        this.$store.state.user.headPict = res.data[0].use_pict;
        this.$store.commit("SET_BGPICT", res.data[0].bg_pict);
      } else {
        this.$message.error(res.message);
      }
    },
    LoginOut() {
      Vue.ls.clear();
      this.$router.push("/");
    },
  },
};
</script>
<style lang='scss' scoped>
.hMenu {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgb(84, 92, 100);
  .picture {
    width: 5%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .circle_piture {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
    }
  }
  .menu {
    width: 75%;
    height: 100%;
  }
  .other {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0 1rem;
    .settings {
      width: 2rem;
      height: 2rem;
      margin-left: 2rem;
      border-radius: 1rem;
      box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
    }
    .el-dropdown-link {
      color: white;
      font-size: 2rem;
    }
  }
}
</style>